<template>
	<view class="body">
		<!-- logo -->
		<image class="header-image" :src="userInfo.userImg">
			<!-- https://c-ssl.duitang.com/uploads/item/202106/17/20210617204503_qgrxd.jpg -->
		</image>
		<!-- 账号 -->
		<view class="content">
			<image class="img" src="../../static/login_imgs/acc.png"></image>
			<input type="number" maxlength="11" placeholder="请输入账号" :value="account" @input="getAcc" />
		</view>
		<!-- 密码 -->
		<view class="content">
			<image class="img" src="../../static/login_imgs/pwd.png"></image>
			<input type="text" maxlength="15" placeholder="请输入密码" :value="password" @input="getPass"
				:password="!visiable" />
			<image class="eye" :src="visiable?'../../static/login_imgs/open.png':'../../static/login_imgs/close.png' "
				@click="eye"></image>
		</view>
		<!-- 忘记密码 -->
		<view class="forget">
			<image class="img" src="../../static/login_imgs/right.png"></image>
			<view class="rember">记住我</view>
			<view class="fpwd" @click="forget">忘记密码?</view>
		</view>
		<!-- 操作按钮 -->
		<view class="button">
			<view class="register" @click="register">注册</view>
			<view class="login" @click="login">登录</view>
		</view>
		<!-- 其他登录选项 -->
		<view class="bottom">
			<view class="bottom-contain">
				其他登陆方式
			</view>
			<!-- 其他图标 -->
			<view class="body-main">
				<view class="bottom-body">
					<image class="bottom-img" src="../../static/login_imgs/QQ.png"></image>
					<view class="bottom-text">QQ</view>
				</view>
				<view class="bottom-body">
					<image class="bottom-img" src="../../static/login_imgs/wx.png"></image>
					<view class="bottom-text">微信</view>
				</view>
				<view class="bottom-body">
					<image class="bottom-img" src="../../static/login_imgs/weibo.png"></image>
					<view class="bottom-text">微博</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that
	var userAccount = getApp().globalData.userAccount
	export default {
		data() {
			return {
				account: null,
				password: null,
				visiable: false,
				userInfo: {
					userImg: 'https://c-ssl.duitang.com/uploads/item/202106/17/20210617204503_qgrxd.jpg',
					name: '',
					sex: ''
				},
				myAccount: {}
			}
		},
		methods: {
			tips() {
				wx.showModal({
					title: '提示',
					content: '将获取你的信息',
					success(res) {
						if (res.confirm) {
							wx.getUserProfile({
								desc: '登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
								success: (res) => {
									that.userInfo.userImg = res.userInfo.avatarUrl
									that.userInfo.name = res.userInfo.nickName
									that.userInfo.sex = res.userInfo.gender
									wx.setStorageSync('userInfo', that.userInfo)
								},
								fail() {
									that.tips()
								}
							})
						} else if (res.cancel) {
							that.tips()
						}
					}
				})
			},
			getAcc(e) {
				this.account = e.detail.value
			},
			getPass(e) {
				this.password = e.detail.value
			},
			eye() {
				this.visiable = !this.visiable
			},
			forget() {
				wx.navigateTo({
					url: '../../other_pages/login_pages/forget'
				})
			},
			register() {
				wx.navigateTo({
					url: '../../other_pages/login_pages/regiest'
				})
			},
			login() {
				const account = this.account
				const password = this.password
				let myAccount = this.myAccount
				userAccount.forEach(item => item.account == account || item.phone == account ? myAccount = item : '')
				if (account == null) {
					wx.showToast({
						title: '请输入账号',
						icon: 'error'
					})
				} else if (!myAccount.account) {
					wx.showToast({
						title: '账号不存在',
						icon: 'error'
					})
				} else if (password == null) {
					wx.showToast({
						title: '请输入密码',
						icon: 'error'
					})
				} else if (myAccount.password != password) {
					wx.showToast({
						title: '密码错误',
						icon: 'error'
					})
				} else {
					wx.setStorageSync('myAccount', myAccount)
					wx.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1300
					})
					setTimeout(function() {
						getApp().globalData.myAccount = myAccount
						wx.switchTab({
							url: '../home/home',
						})
					}, 1300)
				}
			}
		},
		onLoad(options) {
			that = this
			if (!wx.getStorageSync('userInfo')) {
				that.tips()
			} else {
				that.userInfo = wx.getStorageSync('userInfo')
			}
		}
	}
</script>

<style lang="scss">
	.header-image {
		height: 30vw;
		width: 30vw;
		border-radius: 90%;
		margin: 9vh 20vw 3vh;
	}

	.body {
		width: 70vw;
		margin: 0 auto;
	}

	.content {
		display: flex;
		margin: 3vw 0;
		border: solid 1px #00000030;
		border-radius: 3px;
		height: 10vw;
	}

	.content input {
		height: 10vw;
		font-size: 4vw;
		margin-left: 2vw;
	}

	.img {
		display: flex;
		width: 8vw;
		height: 8vw;
		margin: 1vw;
	}

	.eye {
		display: flex;
		width: 8vw;
		height: 8vw;
		margin: 1vw;
	}

	.forget {
		display: flex;
		margin: 3vw 0vw 5vh 0;
		height: 10vw;
	}

	.rember {
		line-height: 10vw;
		display: flex;
		height: 10vw;
		font-size: 4vw;
		margin-left: 2vw;
		color: #00000090;
	}

	.fpwd {
		position: relative;
		right: -25vw;
		line-height: 10vw;
		height: 10vw;
		font-size: 4vw;
		margin-left: 2vw;
		color: #00000090;
	}

	.button {
		display: flex;
		justify-content: space-between;
		margin: 0 0 5vh 0;
	}

	.register {
		text-align: center;
		width: 30vw;
		height: 10vw;
		line-height: 10vw;
		font-size: 15px;
		font-weight: 550;
		background-color: #dcccf3;
		border-radius: 4px;
		color: white;
	}

	.login {
		text-align: center;
		width: 30vw;
		height: 10vw;
		line-height: 10vw;
		font-size: 15px;
		font-weight: 550;
		background-color: #ae8fdc;
		border-radius: 4px;
		color: white;
	}

	.bottom {
		margin-top: 15vh;
		width: 70vw;
		text-align: center;
	}

	.bottom-contain {
		font-size: 4vw;
		color: #00000090;
		margin-bottom: 5vh;
	}

	.body-main {
		display: flex;
		justify-content: space-around;
	}

	.bottom-body {
		// width: 15vw;
		// height: 20vw;
	}

	.bottom-img {
		width: 8vw;
		height: 8vw;
	}

	.bottom-text {
		font-size: 3vw;
	}
</style>
